<script>
import {mapState, mapMutations} from 'vuex';

export default {
  name: 'count_component',
  data() {
    return {
      name: '',
    }
  },
  methods: {

    ...mapMutations({addPerson: 'ADD_PERSON'}),
  },
  computed: {
    ...mapState(['personList','sum']),
  }
}
</script>

<template>
  <div class="count_component">
    <h1 style="color: red">Count组件的sum值{{sum}}</h1>
    <input v-model="name">
    <button @click="addPerson(name);name=''">添加</button>
    <ul>
      <li v-for="person in personList" :key="person.id">{{ person.name }}</li>
    </ul>
  </div>
</template>

<style scoped>
.line {
  display: flex;
}

select {
  width: 40px;
  margin-right: 10px;
}

button {
  margin-right: 10px;
}
</style>